<!-- 人员管理 -->
<template>
    <div >
        <div class='table-page-search-wrapper'>
            <a-form layout='inline'>
               <a-row :gutter='48'>
                    <a-col :md='8' :sm='24'>
                        <a-form-item label="姓名">
                            <a-input v-model="realName" placeholder="请输入姓名" allow-clear></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md='8' :sm='24'>
                        <a-form-item label="身份证号">
                            <a-input v-model="idCard" placeholder="请输入身份证号" allow-clear></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md='8' :sm='24'>
                        <a-form-item label="手机号">
                            <a-input v-model="mobile" placeholder="请输入手机号" allow-clear></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md='8' :sm='24'>
                        <a-form-item label="注册方式">
                            <a-select v-model="registerType" placeholder="请选择" allow-clear @change="getData">
                                <a-select-option v-for="item in registerTypeList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md='8' :sm='24'>
                        <a-form-item label="状态">
                            <a-select v-model="state" placeholder="请选择" allow-clear @change="getData">
                                <a-select-option v-for="item in statusList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md='16' :sm='24'>
                        <a-form-item label="时间">
                            <a-range-picker @change="onDateChange" allow-clear/>
                        </a-form-item>
                    </a-col>
                    <a-col :md='8' :sm='24'>
                        <a-form-item >
                            <a-button type='primary' @click="getData">查询</a-button>
                            <a-button style="margin-left: 20px" type='' @click="download">导出</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>  

        <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" size="small" :pagination="{ total: total ,showSizeChanger: true,pageSize: size,}" :scroll="{ x: 1800, }">
            <div slot="registerType" slot-scope="registerType">
                <div v-if="registerType">
                    <div v-for="(item,i) in registerTypeList" :key="item.id">
                        <a-tag v-if="item.id == registerType" :color="colors[i%13]">{{item.name}}</a-tag>
                    </div>
                </div>
                <div v-else>-</div>
            </div>
            <div slot="idCardFront" slot-scope="idCardFront">
                <img style="width: 120px;height: 60px" v-if="idCardFront && idCardFront.substring(0,4) == 'http'" :src="idCardFront && idCardFront.split(',')[0]" alt="" @click="showImg(idCardFront)">
                <div v-else>-</div>
            </div>
            <div slot="idCardBack" slot-scope="idCardBack">
                <img style="width: 120px;height: 60px" v-if="idCardBack && idCardBack.substring(0,4) == 'http'" :src="idCardBack && idCardBack.split(',')[0]" alt="" @click="showImg(idCardBack)">
                <div v-else>-</div>
            </div>
            <div slot="oneInchPhoto" slot-scope="oneInchPhoto">
                <img style="width: 120px;height: 60px" v-if="oneInchPhoto && oneInchPhoto.substring(0,4) == 'http'" :src="oneInchPhoto && oneInchPhoto.split(',')[0]" alt="" @click="showImg(oneInchPhoto)">
                <div v-else>-</div>
            </div>
            <div slot="businessLicense" slot-scope="businessLicense">
                <img style="width: 120px;height: 60px" v-if="businessLicense && businessLicense.substring(0,4) == 'http'" :src="businessLicense && businessLicense.split(',')[0]" alt="" @click="showImg(businessLicense)">
                <div v-else>-</div>
            </div>
            <div slot="failReason" slot-scope="failReason">
                <ellipsis :length="18" tooltip>{{ failReason == '' || !failReason ? '-' : failReason }}</ellipsis>
            </div>
            <div slot="state" slot-scope="state">
                <div v-for="(item,i) in statusList" :key="item.id">
                    <a-tag v-if="item.id == state" :color="colors[i%13]">{{item.name}}</a-tag>
                </div>
            </div>
            <div slot="operation" slot-scope="text,record">
                <div class="editable-row-operations">
                    <!-- <a-button type="link" @click="detail(record)">详情</a-button> -->
                    <a-button v-if="record.state == 2" type="link" @click="update(record)">更新营业执照</a-button>
                    <a-button v-if="record.state == 1" type="link" @click="success(record)">通过</a-button>
                    <a-button class="errorColor" v-if="record.state == 1" type="link" @click="refuse(record)">拒绝</a-button>
                </div>
            </div>
        </a-table>

        <!-- 审核通过 -->
        <a-modal
            :title="isUpdate ? '更新营业执照' : '设置办理结果-成功'"
            :visible="passVisible"
            @ok="passHandleOk"
            @cancel="passVisible = false"
            >
            <div>
                <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 17 }">
                    <a-form-model-item label="营业执照">
                        <a-upload
                            name="file"
                            @change="handleChangeInvoice"
                            :before-upload="beforeUpload"
                            :fileList = fileList
                            accept=".pdf,.jpg,.png,.jpeg"
                            :remove="()=>{fileList = []}"
                        >
                            <a-button type="primary"> 上传 </a-button>
                            <p class="ant-upload-text" style="margin-top: 10px">
                                支持扩展名JPG/PNG格式，10M以内
                            </p>
                        </a-upload>
                    </a-form-model-item>
                </a-form>
            </div>
        </a-modal>

        <!-- 拒绝原因 -->
        <a-modal
            title="添加拒绝原因"
            :visible="refuseVisible"
            @ok="refuseHandleOk"
            @cancel="refuseVisible = false"
            >
            <div>
                <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 17 }">
                    <a-form-item label="拒绝原因" help="拒绝申请，请向客户说明拒绝原因">
                        <a-textarea :rows="4" v-model="refuseReason" allow-clear placeholder="请输入拒绝原因" :maxLength="100"/>
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>

        <!-- 导出数据 -->
        <a-modal
            title="导出数据，每页10000条"
            :visible="downloadVisible"
            @ok="downladHandleOk"
            :confirm-loading="confirmLoading"
            @cancel="downloadVisible = false"
            >
            <div>
                <a-pagination v-model="current" :page-size.sync="pageSize" :total="total" show-less-items />
            </div>
        </a-modal>

        <!-- 上传图片预览 -->
        <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
            <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
        <!-- 表格图片预览 -->
        <a-modal :visible="previewImgVisible" :footer="null" @cancel="previewImgVisible = false">
            <a-carousel autoplay dots-class="slick-dots slick-thumb" arrows style="margin-bottom:60px">
                <div v-for="(img,i) in showImgs" :key="i">
                    <img :src="img" alt=""/>
                </div>
                <a slot="customPaging" slot-scope="props">
                    <img :src="getImgUrl(props.i)" />
                </a>
            </a-carousel>
        </a-modal>
    </div>
</template>

<script>
import { columns } from './table';
import { getSelfEmployedList , exportSelfEmployed , checkSelfEmployedFail , checkSelfEmployedSuccess , updateBusinessLicense } from '@/api/services/member';
import { fileUpload } from '@/api/system';
import { Ellipsis } from '@/components';
export default {
    components: {
        Ellipsis,
    },
    data () {
        return {
            realName: '', // 姓名
            idCard: '', // 身份证号
            mobile: '', // 手机号
            columns,
            page: 1,
            size: 10,
            total: 0,
            isload: false,
            dataList: [],
            state: undefined,
            statusList: [
                { id: 1, name: '办理中'},
                { id: 2, name: '办理成功'},
                { id: 3, name: '办理失败'},
            ],
            registerType: undefined,
            registerTypeList: [
                { id: 1, name: '线下注册'},{ id: 2, name: 'API注册'}
            ],
            visible: false,
            form: this.$form.createForm(this.agency),
            agency: {
                id: ''
            },
            // colors: ['blue','purple','cyan','green','orange','red','pink','brown','indigo','lime','purple','teal','yellow','amber'],
            colors: ['orange','cyan','red','green','orange','red','pink','brown','indigo','lime','purple','teal','yellow','amber'],
            current: 1,
            downloadVisible: false,
            pageSize: 10000,
            confirmLoading: false,
            previewVisible: false,
            previewImage: '',
            previewImgVisible: false,
            showImgs: [],
            refuseVisible: false,
            refuseReason: '',
            item: {
                id: ''
            },
            passVisible: false,
            fileList: [],
            businessLicense: '', // 营业执照图片信息
            isUpdate: false,
        };
    },
    created(){
        this.getData();
    },
    methods: {
        // 日期筛选
        onDateChange(date,dateStr){
            console.log(date,dateStr)
            if(date.length > 0){
                this.startTime = `${dateStr[0]}`
                this.endTime = `${dateStr[1]}`
            }else{
                this.startTime = ''
                this.endTime = ''
            }
            this.getData()
        },
        // 获取账户列表数据
        getData(){
            let _this = this;
            _this.isload = true;
            const params = {
                'startTime': _this.startTime,
                'endTime': _this.endTime,
                'realName': _this.realName,
                'idCard': _this.idCard,
                'mobile': _this.mobile,
                'state': _this.state,
                'registerType': _this.registerType,
                'pageIndex': _this.page,
                'pageSize': _this.size,
            }
            getSelfEmployedList(params)
            .then(res => {
                _this.isload = false;
                if(res.success){
                    _this.dataList = res.data;
                    _this.total = res.totalCount;
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        // 查看详情
        detail(item){
            this.$router.push({ path: '/servicesMember/memberDetail', query: { 'member': JSON.stringify(item)}})
        },
        // 导出
        download(){
            this.downloadVisible = true;
        },
        downladHandleOk(){
            let _this = this;
            _this.confirmLoading = true;
            const params = {
                'startTime': _this.startTime,
                'endTime': _this.endTime,
                'realName': _this.realName,
                'idCard': _this.idCard,
                'mobile': _this.mobile,
                'state': _this.state,
                'pageIndex': _this.current,
                'pageSize': _this.pageSize,
            }
            exportSelfEmployed(params)
            .then(res => {
                _this.confirmLoading = false;
                if(res){
                    const content = res
                    console.log(res,"res")
                    let blob = new Blob([content], {type: 'application/x-excel'});
                    const fileName = '个体户管理列表.xlsx'
                    if ('download' in document.createElement('a')) { // 非IE下载
                        const elink = document.createElement('a')
                        elink.download = fileName
                        elink.style.display = 'none'
                        elink.href = URL.createObjectURL(blob)
                        document.body.appendChild(elink)
                        elink.click()
                        URL.revokeObjectURL(elink.href) // 释放URL 对象
                        document.body.removeChild(elink)
                    } else { // IE10+下载
                        navigator.msSaveBlob(blob, fileName)
                    }
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
        // 预览图片
        showImg(imgs){
            if(imgs){
                this.showImgs = imgs.split(',')
                console.log(this.showImgs,'imgs')
                this.previewImgVisible = true
            }
        },
        getImgUrl(i){
            return this.showImgs[i]
        },
        // 通过审核
        success(item){
            this.item = JSON.parse(JSON.stringify(item));
            this.businessLicense = ''
            this.isUpdate = false;
            this.passVisible = true;
        },
        // 更新营业执照
        update(item){
            this.item = JSON.parse(JSON.stringify(item));
            this.businessLicense = ''
            this.isUpdate = true;
            this.passVisible = true;
        },
        passHandleOk(){
            let _this = this;
            // if(_this.businessLicense == ''){
            //     _this.$message.warning('请上传营业执照');
            //     return;
            // }
            const params = {
                'id': _this.item.id,
                'businessLicense': _this.businessLicense,
            }
            var api = _this.isUpdate ? updateBusinessLicense(params) : checkSelfEmployedSuccess(params)
            api.then(res => {
                if(res.success){
                    _this.$notification['success']({
                        message: '温馨提示',
                        description: '操作成功',
                        duration: 8
                    })
                    _this.passVisible = false;
                    _this.getData();
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
        // 拒绝审核
        refuse(item){
            this.item = JSON.parse(JSON.stringify(item));
            this.refuseReason = '';
            this.refuseVisible = true;
        },
        refuseHandleOk(){
            let _this = this
            console.log(_this.refuseReason)
            const params = {
                'id': _this.item.id,
                'failReason': _this.refuseReason,
            }
            checkSelfEmployedFail(params)
            .then(res => {
                if(res.success){
                    _this.$notification['success']({
                        message: '温馨提示',
                        description: '操作成功',
                        duration: 8
                    })
                    _this.refuseVisible = false;
                    _this.getData();
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
        beforeUpload(file) {
            return false;
        },
        handleChangeInvoice({file,fileList}){
            let _this = this
            const status = file.status;
            if(file.status === 'removed'){
                this.fileList = []
                return
            }
            this.fileList = fileList
            const formData = new FormData();
            formData.append('multipartFile',file)
            fileUpload(formData)
            .then(res=>{
                if(res.success){
                    _this.businessLicense = res.data
                    // _this.$refs.ruleForm.clearValidate()
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
    }
}

</script>
<style scoped>
.imgUrl{
    width: 180px;
    height: 100px;
}
.ant-carousel >>> .slick-slide img {
    text-align: center;
    height: 300px;
    line-height: 300px;
    background: #364d79;
    overflow: hidden;
    width: 100%;
}
.ant-carousel >>> .slick-thumb {
  bottom: -15px;
}
.ant-carousel >>> .slick-thumb li {
  width: 60px;
  height: 45px;
}
.ant-carousel >>> .slick-thumb li img {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
}
.ant-carousel >>> .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}
</style>